<template>
  <div class="dashboard">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>数据看板</h1>
      <p>欢迎回来，{{ userStore.user?.username || '管理员' }}！今天是 {{ currentDate }}</p>
    </div>

    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon user-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <h3>总用户数</h3>
              <p class="stat-number">1,234</p>
              <span class="stat-trend up">↑ 12% 较上月</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon order-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <h3>今日订单</h3>
              <p class="stat-number">56</p>
              <span class="stat-trend up">↑ 8% 较昨日</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon product-icon">
              <el-icon><Goods /></el-icon>
            </div>
            <div class="stat-info">
              <h3>产品数量</h3>
              <p class="stat-number">89</p>
              <span class="stat-trend">→ 与上月持平</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon sales-icon">
              <el-icon><Money /></el-icon>
            </div>
            <div class="stat-info">
              <h3>销售额</h3>
              <p class="stat-number">¥12,345</p>
              <span class="stat-trend up">↑ 15% 较上月</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <span>用户增长趋势</span>
          </template>
          <div class="chart-placeholder">
            <el-icon><PieChart /></el-icon>
            <p>用户增长图表</p>
            <small>ECharts 图表待集成</small>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <span>销售数据</span>
          </template>
          <div class="chart-placeholder">
            <el-icon><TrendCharts /></el-icon>
            <p>销售数据图表</p>
            <small>ECharts 图表待集成</small>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <el-card class="quick-actions">
      <template #header>
        <span>快捷操作</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-button type="primary" class="action-btn" @click="goToUserManagement">
            <el-icon><User /></el-icon>
            用户管理
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="success" class="action-btn" @click="goToProductManagement">
            <el-icon><Goods /></el-icon>
            产品管理
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="warning" class="action-btn" @click="goToOrderManagement">
            <el-icon><Document /></el-icon>
            订单管理
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="info" class="action-btn" @click="goToSettings">
            <el-icon><Setting /></el-icon>
            系统设置
          </el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  User, 
  Document, 
  Goods, 
  Money, 
  PieChart, 
  TrendCharts,
  Setting 
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const currentDate = computed(() => {
  return new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

const goToUserManagement = () => {
  ElMessage.info('用户管理功能开发中...')
}

const goToProductManagement = () => {
  ElMessage.info('产品管理功能开发中...')
}

const goToOrderManagement = () => {
  ElMessage.info('订单管理功能开发中...')
}

const goToSettings = () => {
  ElMessage.info('系统设置功能开发中...')
}
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 8px;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.user-icon { background: #1890ff; }
.order-icon { background: #52c41a; }
.product-icon { background: #faad14; }
.sales-icon { background: #f5222d; }

.stat-info h3 {
  margin: 0 0 8px 0;
  color: #606266;
  font-size: 14px;
  font-weight: normal;
}

.stat-number {
  margin: 0 0 4px 0;
  color: #303133;
  font-size: 24px;
  font-weight: bold;
}

.stat-trend {
  font-size: 12px;
}

.stat-trend.up {
  color: #52c41a;
}

.charts-row {
  margin-bottom: 24px;
}

.chart-card {
  border-radius: 8px;
  height: 300px;
}

.chart-placeholder {
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 16px;
}

.chart-placeholder .el-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.quick-actions {
  border-radius: 8px;
}

.action-btn {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.action-btn .el-icon {
  font-size: 24px;
}
</style>